function banner() {
  var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    mousewheelControl: true,
    autoplayDisableOnInteraction: false,
    loop: true,
    autoplay: 1000,
    speed: 800,
    paginationType: 'fraction'
    // paginationType: 'bullets'
  })
}

// 获取元素
const minPrice = document.querySelector('.price .left i')
const maxPrice = document.querySelector('.price .del i')
const sales = document.querySelector('.price .right .sale')
const uname = document.querySelector('.ellipsis-2')
const goodDetails = document.querySelector('.goodDetails .content')
document.addEventListener('DOMContentLoaded', async function () {
  // 渲染头部标题----------------------------------
  const { data: res } = await axios.get('/goods/detail', {
    params: {
      goodsId: localStorage.getItem('goodid')
    }
  })
  console.log(res)
  minPrice.innerHTML = res.data.detail.goods_price_max
  maxPrice.innerHTML = res.data.detail.line_price_max
  sales.innerHTML = `已售${res.data.detail.goods_sales}件`
  uname.innerHTML = res.data.detail.goods_name
  goodDetails.innerHTML =
    '<div class="tit">商品描述</div>' + res.data.detail.content
  // 轮播图渲染----------------------------------
  const newImg = res.data.detail.goods_images
    .map(item => {
      return `
    <div class="swiper-slide">
      <img
        src="${item.preview_url}"
        alt=""
      />
    </div>
    `
    })
    .join('')
  document.querySelector('.swiper-wrapper').innerHTML = newImg

  banner()

  // 获取服务列表---------------------------------
  const { data: resServer } = await axios.get('/goods.service/list', {
    params: {
      goodsId: localStorage.getItem('goodid')
    }
  })
  // console.log(resServer.data.list)
  const newServerStr = resServer.data.list
    .map((item, index) => {
      return `
    <div class="s_item" data-id='${item.service_id}'>
      <i class="iconfont icon-zhengpinbaozhangduigou"></i>
      <span>${item.name}</span>
    </div>
    `
    })
    .join('')
  document.querySelector('.service-wrapper .s_left').innerHTML = newServerStr

  // 获取评论数-----------------------------
  const { data: resCon } = await axios.get('/comment/listRows', {
    params: {
      goodsId: localStorage.getItem('goodid'),
      limit: 2
    }
  })
  // console.log(resCon.data)
  document.querySelector('.talk_tet em').innerHTML = resCon.data.total
  const newContentStr = resCon.data.list
    .map((item, index) => {
      return `
    <div class="item" data-id='${item.comment_id}'>
      <div class="user" data-index='${item.user_id}'>
        <div class="pic">
          <img
            src="${
              item.user.avatar_url
                ? item.user.avatar_url
                : 'http://cba.itlike.com/public/mweb/static/default-avatar.png'
            }"
            alt=""
          />
        </div>
        <div class="uname">${item.user.nick_name}</div>
        <div class="star">
          <span class="iconfont icon-shoucang1"></span>
        </div>
      </div>
      <div class="txt">${item.content}</div>
      <div class="time">${item.create_time}</div>
    </div>
    `
    })
    .join('')
  document.querySelector('.talk_content').innerHTML = newContentStr

  // 轮播图数字------------------------------
})
